<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing</title>
    <style>
        .wrap {
            width: 1200px;
            height: auto;
            margin: 200px auto;
        }

        #typing-box {

            font-size: 64px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color: teal;
            line-height: 1.2;
            position: relative;
        }

        #typing-box::after {
            display: block;
            content: '';
            height: 5px;
            width: 30px;
            background-color: teal;
            position: absolute;
            right: -30px;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span id="typing-box"></span>
    </div>
</body>
<script>
    const text = `The People's Republic of China Forever !!`
    const box = document.getElementById('typing-box')
    function typing(text) {
        for (let index = 0; index < text.length; index++) {
            setTimeout(() => {
                if (index<(text.length-1)) {
                    box.innerHTML += text[index]
                } else {
                    box.innerHTML=''
                    typing(text)
                }
            }, 500+ 100* index);
        }
    }
    typing(text)
</script>

</html>